<template>
  <div class="bg-container">
    <div class="bg-img">
      <!-- <el-image :src="bgImg" fit="cover"> </el-image> -->
      <el-carousel indicator-position="inside" height="520px">
        <el-carousel-item v-for="item in bgImg" :key="item.id">
          <a :href="item.redirectUrl ? item.redirectUrl : ''">
            <el-image :src="item.picture" fit="cover"> </el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="w-1200-container pb-8">
      <div v-for="item in moduleList" :key="item.id" class="ser-module">
        <div class="left-img bg-purp relative">
          <div class="left-icon-box">
            <el-image
              class="left-icon"
              :src="require('@/assets/icons/service/ling.png')"
            ></el-image>
            <h5>
              {{ item.title }}
            </h5>
          </div>

          <el-image class="left-bg" :src="item.bg" fit="cover"> </el-image>
        </div>
        <div class="right-contain">
          <div
            v-for="subItem in item.list"
            :key="subItem.title"
            class="item-box"
          >
            <div class="item">
              <div class="title">
                {{ subItem.title }}
              </div>
              <div class="content">
                {{ subItem.content }}
              </div>
              <div class="btn">
                <el-image
                  class="icon"
                  :src="require('@/assets/icons/service/msg.png')"
                ></el-image>
                立即咨询
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white pt-10 pb-12">
      <div class="w-1200-container bg-white">
        <div class="text-xl font-bold py-8 ">
          其他科技服务
        </div>
        <div class="tech-list">
          <div class="item-box">
            <div class="bg-item" style="">
              <h5>
                软件开发
              </h5>
            </div>
            <div class="list">
              <div v-for="item in list1" :key="item" class="item">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="item-box">
            <div class="bg-item">
              <h5>
                知识产权
              </h5>
            </div>
            <div class="list">
              <div v-for="item in list2" :key="item" class="item">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="item-box">
            <div class="bg-item">
              <h5>
                其他服务
              </h5>
            </div>
            <div class="list">
              <div v-for="item in list3" :key="item" class="item">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgImg: [
        {
          picture: require('@/assets/page-head/policy.png'),
          address: '南昌市',
        },
      ],
      moduleList: [
        {
          id: 0,
          title: '技术转移服务',
          bg: require('@/assets/icons/service/01.png'),
          list: [
            {
              title: '技术诊断',
              content:
                '根据企业客户所在行业及企业自身技术问题，协调行业技术专家，深入企业现场，为企业提供专业化技术诊断与需求分析，帮助企业找到技术问题，提供解决建议。',
            },
            {
              title: '网上技术市场',
              content:
                '鼓励科技成果转让方、受让方、技术转移服务机构等各类主体，以实名制的方式，参与“江西省网上常设技术市场”的科技成果在线对接和技术交易等活动。',
            },
            {
              title: '产学研合作',
              content:
                '产学研合作是针对企业发展过程中需要与高校院所进行产学研合作的需求，提供与高校一级行政单位产学研合作渠道，帮助企业建立技术背书。',
            },
            {
              title: '技术转移培训',
              content:
                '组织开展技术经理人培训，进行技术转移体制机制解读，技术转让、技术许可、联合研发等的方法路径疏通，实务操作演练案例分享。',
            },
            {
              title: '企业技术创新',
              content:
                '帮助企业技术创新而打造的服务矩阵，以技术转移为核心，配套知识产权、政策应用等服务，定制化组合，为企业落实创新发展提供全方位支持。',
            },
            {
              title: '科技人才',
              content:
                '组织开展技术经理人培训，进行帮助企业技术创新而打造的服务矩阵，以技术转移为核心，配套知识产权、政策应用等服务，定制化组合，为企业落实创新发展提供全方位支持。',
            },
          ],
        },
        {
          id: 1,
          title: '科技创新服务',
          bg: require('@/assets/icons/service/02.png'),
          list: [
            {
              title: '科技型中小企业',
              content: '享受税收减免优惠，获得政府政策扶持，推动企业快速发展',
            },
            {
              title: '高新技术企业',
              content:
                '享受国家的补贴政策和税收上的优惠等好处，吸引风投等金融机构的关注，助力企业快速发展甚至优先上市',
            },
            {
              title: '瞪羚企业',
              content: '享受税收减免优惠，获得政府政策扶持，推动企业快速发展',
            },
            {
              title: '独角兽企业',
              content: '帮助江西创业者积极对接国内外优质投资，加快企业培育',
            },
            {
              title: '知识产权',
              content: '为科技型企业提供个性化的综合性融资解决方案',
            },
            {
              title: '科技人才',
              content:
                '围绕人才创业所需要的场地、人员、资金等要素进行资源对接，同时为人才企业注入企业创新服务体系，帮助人才项目孵化',
            },
          ],
        },
        {
          id: 2,
          title: '科技金融服务',
          bg: require('@/assets/icons/service/03.png'),
          list: [
            {
              title: '企业VIP咨询',
              content:
                '主要从顶层架构设计、股权结构设计、股权运营方案设计、股权激励方案设计、商业模式重塑、财税规划、信用体系建设、资本市场进展规划、价值运动体系设立、...',
            },
            {
              title: '商业计划书打磨',
              content:
                '从投资机构角度为企业打磨商业计划书——（1）囊括投资机构关注的各项基本信息；（2）为企业提取投资亮点；（3）展示发展潜力。为企业更好地吸引投资机构。',
            },
            {
              title: '股权框架设计',
              content:
                '根据客户的设立地点、目前组织架构、未来发展规划等设计合理的股权架构、员工激励平台等，以达到优化管理、合理避税、有效激励员工等目的，并为后续的企业扩张...',
            },
            {
              title: '科技融资筹划',
              content:
                '对有融资需求的科技型企业，根据其财务状况、发展阶段、项目推荐等特点，提供个性化融资解决方案。',
            },
            {
              title: '创赛辅导',
              content:
                '全方位为客户提供创业比赛需要的BP打磨、路演辅导、赛后提升、项目落地、对接资本等服务。',
            },
            {
              title: '企业区域落地',
              content:
                '根据企业阶段性发展规划，助力企业从战略规划到市场拓展、产品研发、人才引进等方面综合规划及支持，择优进行区域布局合作。',
            },
          ],
        },
      ],

      list1: [
        'APP开发',
        '小程序开发',
        '微信开发',
        '定制开发',
        'UI设计',
        'VI设计',
      ],
      list2: [
        '商标注册',
        '软件著作权',
        '发明专利',
        '商标转让',
        '版权登记',
        '实用新型专利',
      ],
      list3: [
        '法律服务',
        '工商服务',
        '财税服务',
        '金融服务',
        '媒体宣传',
        '人力资源',
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.bg-img {
  width: 100%;
  height: 520px;

  .el-image {
    width: 100%;
    height: 100%;
  }
}
.ser-module {
  height: 472px;

  @apply flex;

  .bg-purp {
    // background: linear-gradient(135deg, #5e89fe, #8519f0 99%);
  }

  .left-img {
    min-width: 287px;
    width: 287px;
    height: 472px;
    @apply mr-4 overflow-hidden;
    .left-icon-box {
      @apply absolute left-1/2 top-40 z-10 w-40 text-center text-white transform -translate-x-1/2;
      .left-icon {
        width: 68px;
        height: 68px;
      }
    }

    .left-bg {
      @apply absolute left-0 bottom-0 w-full h-full;
    }
    .img-title {
      @apply font-bold text-white text-2xl mt-20 text-center pt-9;
    }
  }
  .right-contain {
    background: rgba(245, 158, 11, 0.5);
    @apply grid grid-cols-3 gap-0.5;

    .item-box {
      width: 297px;
      height: 236px;
      @apply relative flex flex-col;

      .item {
        width: 100%;
        height: 236px;

        @apply absolute left-0 top-0 p-4 bg-white text-black transition-all ease-linear duration-150 cursor-pointer;

        .title {
          @apply text-sm text-t333 font-bold;
        }
        .content {
          min-height: 7rem;
          @apply mt-4 text-t666 font-normal text-sm leading-7;
        }

        .btn {
          width: 128px;
          height: 37px;

          @apply flex justify-center items-center mt-8 bg-yellow-500  text-center  text-white;
          .icon {
            @apply w-6 h-6;
          }
        }

        // &:hover {
        //   height: 280px;
        //   z-index: 100;
        //   .btn {
        //     @apply flex justify-center items-center transform -translate-x-1/2;
        //   }
        //   @apply bg-blue-500 text-white;

        //   .title {
        //     @apply text-sm text-white font-bold;
        //   }
        //   .content {
        //     @apply mt-4 text-white font-normal text-sm leading-7;
        //   }
        // }
      }
    }
  }
}
.ser-module:first-of-type {
  @apply mt-12;
}

.ser-module:not(:last-of-type) {
  @apply mb-8;
}

.tech-list {
  @apply grid grid-cols-3 gap-8;
  .item-box {
    .bg-item {
      height: 115px;
      width: 100%;

      @apply flex-grow flex items-center;

      h5 {
        @apply text-white pl-16;
      }
    }
    .list {
      @apply grid grid-cols-2 gap-4 p-4;
      div {
        @apply border border-gray-400 h-12 leading-10 text-center text-t333 cursor-pointer;
      }
    }
  }

  .item-box:nth-of-type(1) {
    .bg-item {
      background: url('../../assets/icons/service/04.png');
      background-size: contain;
    }
  }
  .item-box:nth-of-type(2) {
    .bg-item {
      background: url('../../assets/icons/service/05.png');
      background-size: contain;
    }
  }
  .item-box:nth-of-type(3) {
    .bg-item {
      background: url('../../assets/icons/service/06.png');
      background-size: contain;
    }
  }
}
</style>
